<template>
  <div>{{ message }}</div>
  <div>{{ znumber }}</div>
  <!-- <div>{{ tiv.data[0] }}</div> -->
  <div>{{ fiv}}</div>
  <RouterLink to="/about">About</RouterLink>
  <RouterView />
</template>
<script setup lang='ts'>
import HelloWorld from '../components/HelloWorld.vue'
import { computed, reactive, ref,onMounted } from 'vue'
const number = ref(5)
// let tiv = ref([1111,2,3,4])
//reactive失去响应式解决方案  2在外卖套个{}
// let tiv = reactive({
//   data:[33333,22222,4444]
// })
let fiv = reactive([{id:1,name:'小兰'}])
const arr = [22222,4444,555]
const obj = [{id:2,name:'小花'}]
const author = ref({
  name: '小黑',
  books: ['vue3=aaa', 'vue3-bbb', 'vue3-cccc']
})
const message = computed(() => {
  return author.value.books.length > 0 ? 'Yes' : 'NO'
})
const znumber = computed(() => {
  return number.value * 2
})
onMounted(()=>{
  // tiv.data= arr  //或者这样写
  // fiv[0].name = obj[0].name
  //不能直接赋值
  Object.assign(fiv,obj)  //这样就可以
})
</script>


<style lang='scss'>
</style>
